<template>
	<view class="checkOrder">

		<view class="des">
			<view class="desitem1">
				<text style="margin-right: 10rpx;">{{addressInfo.name}}</text>
				<text>{{addressInfo.mobile}}</text>
			</view>
			<view class="desitem2">
				<text>{{addressInfo.address}}{{addressInfo.house_number}}</text>
				<text @click="gomyAddress()">></text>
			</view>
		</view>

		<view class="orderList" v-for="item in paysList">
			<view class="pic">
				<image :src="item.snack_id[0].imageValue" mode="aspectFill">
			</view>
			<view class="des2">
				<view class="des2item1">{{item.snack_id[0].name}}</view>
				<view class="des2item2">
					<text>${{item.snack_id[0].price}}</text>
				</view>
			</view>
			<view class="number">
				<text>{{item.number}}</text>
			</view>
		</view>

		<view class="payway">
           <view class="paywayitem">
			   <text>总金额</text>
			   <text>{{total}}</text>
		   </view>
		 <view class="paywayitem">
			 <text>优惠劵</text>
			 <text>></text>
		 </view>
		 <view class="paywayitem">
			 <text>支付方式</text>
			 <text @click="show=true">微信</text>
		 </view>
		   <view class="paywayitem">
			   <text>备注</text>
			  <!-- <input placeholder="习惯偏好等要求"> -->
		   </view>
		</view>

		<view class="pay">
			<view class="payitem1">
				<text>合计:{{total}}</text>
			</view>
			<view class="payitem2">
				<u-button type="error" shape="circle" text="确定" @click="successOrder(total)"></u-button>
			</view>
		</view>
		<u-picker :show="show" :columns="columns"></u-picker>
	</view>
</template>

<script>
	const db=uniCloud.database();
	const dbCmd=db.command;
	const CloudUser=uniCloud.importObject("users")
	const cloudShoppingCarts = uniCloud.importObject("shoppingCarts");
	const CloudAddress=uniCloud.importObject("address");
	const CloudOrder=uniCloud.importObject("order")
	export default {
		data() {
			return {
				user_id:"",
                userInfo:"",
				addressInfo:"",
				paysList:[],
				show:false,
				columns:[["微信","支付宝"]],
				orderidList:[],
			}
		},
		onLoad(e) {
			console.log(JSON.parse(e.paysList));
			this.paysList=JSON.parse(e.paysList);
			this.user_id=uni.getStorageSync("uni-id-pages-userInfo")._id;
			console.log(this.user_id);
			Promise.all([this.getuserInfo(this.user_id),
			this.getdefaultAddress(this.user_id)
		
			]);
		},
		computed:{
			total(){
				let total=0;
				for(let item of this.paysList){
					total+=item.snack_id[0].price*item.number
				}
				return total;
			}
		},
		methods: {
                getuserInfo(user_id){
                	CloudUser.getuserInfo(user_id).then(res=>{
                		console.log(res);
                		this.userInfo=res.data[0];
                	})
                },
				getdefaultAddress(user_id){
					 CloudAddress.getDefaultAddress(user_id).then(res=>{
						 console.log(res);
						this.addressInfo=res.data[0]
					})
				},
				
							gomyAddress(){
								uni.navigateTo({
									url:"/pages/address/myAddress/myAddress"
								})
							},
					        async successOrder(total){
						 		for(let item of this.paysList){
								    let  res=await CloudOrder.addOrder(this.user_id,item.snack_id[0]._id,item.number,item.number*item.snack_id[0].price)
									this.orderidList.push(Object.assign(item,res))
								}
								console.log(this.orderidList);
								uni.navigateTo({
									url:`/pages/order/successOrder/successOrder?&total=${total}&orderidList=${JSON.stringify(this.orderidList)}`
								})
							}
		}
	}
</script>

<style lang="scss" scoped>
	.checkOrder {
		width: var(--status-bar-width);
		height: 1400rpx;
		overflow-y: hidden;
		overflow: scroll;
		padding: 20rpx 20rpx;
		.des {
			width: 100%;
			height: 150rpx;
			// background-color: rebeccapurple;

			.desitem1 {
				line-height: 60rpx;
			}

			.desitem2 {
				width: 100%;
				display: flex;
				justify-content: space-between;
			}
		}

		.orderList {
			margin-top: 20rpx;
			height: 160rpx;
			display: flex;
			align-items: center;

			.pic {
				width: 150rpx;
				height: 150rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.des2 {
				box-sizing: content-box;
				display: flex;
				flex-direction: column;
				margin-left: 10rpx;
				height: 150rpx;
				width: 500rpx;
				justify-content: space-around;

				.des2item1 {
					font-size: 30rpx;
				}

				.des2item2 {
					font-size: 40rpx;
					color: red;
				}
			}
		}
		
		.payway{
			margin-top: 20rpx;
			.paywayitem{
				z-index: 1;
				display: flex;
				justify-content: space-between;
				line-height: 60rpx;
				height: 60rpx;
			}
		}
	}

	.pay {
		width: 95%;
		
		position: fixed;
		bottom: var(--window-bottom,0);
		background-color: white;
		box-sizing: content-box;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.payitem1{
			width: 200rpx;
		}
		.payitem2{
			width: 200rpx;
		}
		}
</style>